<template>
    <div class="content-main" v-if="showChapterFlag == 3">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/teacher/index' }">实训案例</el-breadcrumb-item>
                <el-breadcrumb-item>案例实训</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-box">
            <div class="project-training">
                <div class="training-title">
                    <img src="./../../assets/images/title_icon10.png" />
                    1～8课时
                </div>
                <div class="training-list">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <router-link to="/teacher/projectTrainingDetail">
                                <div class="list-content customize">
                                    <div class="list-title">
                                        <span>01</span>
                                        <p>Vue案例预热单文件组件单文件组件与</p>
                                    </div>
                                    <div class="list-line"></div>
                                    <div class="list-paragraph">预购分析系统是以电信用户上网行为日志为基础的预购分析系统。通过海量的析系统。</div>
                                    <div class="list-tag">自定义</div>
                                    <div class="list-tag-point"></div>
                                </div>
                            </router-link>
                        </el-col>
                        <el-col :span="6">
                            <div class="list-content preset">
                                <div class="list-title">
                                    <span>01</span>
                                    <p>Vue案例预热单文件组件单文件组件与</p>
                                </div>
                                <div class="list-line"></div>
                                <div class="list-paragraph">预购分析系统是以电信用户上网行为日志为基础的预购分析系统。通过海量的析系统。</div>
                                <div class="list-tag">预置</div>
                                <div class="list-tag-point"></div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="list-content">
                                <div class="list-title">
                                    <span>01</span>
                                    <p>Vue案例预热单文件组件单文件组件与</p>
                                </div>
                                <div class="list-line"></div>
                                <div class="list-paragraph">预购分析系统是以电信用户上网行为日志为基础的预购分析系统。通过海量的析系统。</div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="list-content">
                                <div class="list-title">
                                    <span>01</span>
                                    <p>Vue案例预热单文件组件单文件组件与</p>
                                </div>
                                <div class="list-line"></div>
                                <div class="list-paragraph">预购分析系统是以电信用户上网行为日志为基础的预购分析系统。通过海量的析系统。</div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="list-content">
                                <div class="list-title">
                                    <span>01</span>
                                    <p>Vue案例预热单文件组件单文件组件与</p>
                                </div>
                                <div class="list-line"></div>
                                <div class="list-paragraph">预购分析系统是以电信用户上网行为日志为基础的预购分析系统。通过海量的析系统。</div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="list-content">
                                <div class="list-title">
                                    <span>01</span>
                                    <p>Vue案例预热单文件组件单文件组件与</p>
                                </div>
                                <div class="list-line"></div>
                                <div class="list-paragraph">预购分析系统是以电信用户上网行为日志为基础的预购分析系统。通过海量的析系统。</div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="list-content">
                                <div class="list-title">
                                    <span>01</span>
                                    <p>Vue案例预热单文件组件单文件组件与</p>
                                </div>
                                <div class="list-line"></div>
                                <div class="list-paragraph">预购分析系统是以电信用户上网行为日志为基础的预购分析系统。通过海量的析系统。</div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="list-content">
                                <div class="list-title">
                                    <span>01</span>
                                    <p>Vue案例预热单文件组件单文件组件与</p>
                                </div>
                                <div class="list-line"></div>
                                <div class="list-paragraph">预购分析系统是以电信用户上网行为日志为基础的预购分析系统。通过海量的析系统。</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="training-title">
                    <img src="./../../assets/images/title_icon10.png" />
                    9～16课时
                </div>
                <div class="training-list">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="list-content">
                                <div class="list-title">
                                    <span>01</span>
                                    <p>Vue案例预热单文件组件单文件组件与</p>
                                </div>
                                <div class="list-line"></div>
                                <div class="list-paragraph">预购分析系统是以电信用户上网行为日志为基础的预购分析系统。通过海量的析系统。</div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="list-content">
                                <div class="list-title">
                                    <span>01</span>
                                    <p>Vue案例预热单文件组件单文件组件与</p>
                                </div>
                                <div class="list-line"></div>
                                <div class="list-paragraph">预购分析系统是以电信用户上网行为日志为基础的预购分析系统。通过海量的析系统。</div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="list-content">
                                <div class="list-title">
                                    <span>01</span>
                                    <p>Vue案例预热单文件组件单文件组件与</p>
                                </div>
                                <div class="list-line"></div>
                                <div class="list-paragraph">预购分析系统是以电信用户上网行为日志为基础的预购分析系统。通过海量的析系统。</div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="list-content">
                                <div class="list-title">
                                    <span>01</span>
                                    <p>Vue案例预热单文件组件单文件组件与</p>
                                </div>
                                <div class="list-line"></div>
                                <div class="list-paragraph">预购分析系统是以电信用户上网行为日志为基础的预购分析系统。通过海量的析系统。</div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="list-content">
                                <div class="list-title">
                                    <span>01</span>
                                    <p>Vue案例预热单文件组件单文件组件与</p>
                                </div>
                                <div class="list-line"></div>
                                <div class="list-paragraph">预购分析系统是以电信用户上网行为日志为基础的预购分析系统。通过海量的析系统。</div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="list-content">
                                <div class="list-title">
                                    <span>01</span>
                                    <p>Vue案例预热单文件组件单文件组件与</p>
                                </div>
                                <div class="list-line"></div>
                                <div class="list-paragraph">预购分析系统是以电信用户上网行为日志为基础的预购分析系统。通过海量的析系统。</div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="list-content">
                                <div class="list-title">
                                    <span>01</span>
                                    <p>Vue案例预热单文件组件单文件组件与</p>
                                </div>
                                <div class="list-line"></div>
                                <div class="list-paragraph">预购分析系统是以电信用户上网行为日志为基础的预购分析系统。通过海量的析系统。</div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="list-content">
                                <div class="list-title">
                                    <span>01</span>
                                    <p>Vue案例预热单文件组件单文件组件与</p>
                                </div>
                                <div class="list-line"></div>
                                <div class="list-paragraph">预购分析系统是以电信用户上网行为日志为基础的预购分析系统。通过海量的析系统。</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <!-- <el-steps :space="200" :active="active" align-center finish-status="success">
                <el-step title="阅读性相关清洗"></el-step>
                <el-step title="阅读性相关清洗"></el-step>
                <el-step title="阅读性相关清洗"></el-step>
                <el-step title="阅读性相关清洗"></el-step>
                <el-step title="阅读性相关清洗"></el-step>
            </el-steps>
            <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->
        </div>
     </div>
     <div class="content-main" v-else-if="showChapterFlag == 2"  style="height:100%;">
        <div class="project-tips-box">
            <img src="./../../assets/images/project_tips2.jpg" />
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        data () {
            return {
                active: 0,
                showChapterFlag: '',
                tableData5: [{
                    id: '12987122',
                    name: '好滋好味鸡蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                }, {
                    id: '12987123',
                    name: '好滋好味鸡蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                }, {
                    id: '12987125',
                    name: '好滋好味鸡蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                }, {
                    id: '12987126',
                    name: '好滋好味鸡蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                }]
            }
        },
        created () {
            this.projectId = JSON.parse(window.localStorage.getItem('teacher-project-id')).itemId
            this.showChapterFlag = this.$store.state.itemServiceValue.showChapterFlag
            // this.showChapterFlag = JSON.parse(window.localStorage.getItem('updateItemServiceType')).showChapterFlag

            if(this.showChapterFlag == 3){
                // this.init() //初始化
            }
        },
        methods: {
            next() {
                if (this.active++ > 4) this.active = 0;
            }
        },
        computed:{
			...mapState(['itemServiceValue'])
		}
    }
</script>
